<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="$t('activity')" :border-bottom="false"></fa-navbar>


		<view class="u-p-t-30 u-p-b-30">
			<u-swiper :effect3d="true" :list="vuex_config.swiper" border-radius="15" :title="true" :height="350"
				@click="openPage"></u-swiper>
		</view>

		<view class="notice bg-white" v-if="notice.length">
			<u-notice-bar mode="horizontal" type="warning" :duration="5000" :is-circular="false" :autoplay="true"
				:list="notice" @click="click"></u-notice-bar>
		</view>

		<view class="index-content">
			<view class="u-font-30 title">
				<u-section :title="$t('activity.hot')" :right="true" :bold="true" :color="color" :show-line="true"
					:sub-title="$t('activity.hot.subtitle')" @click="goPage('/pages/activity/lists')"></u-section>
			</view>

			<view class="hots-list">
				<view class="page-box" v-if="hots.length > 0">
					<view v-for="(item, index) in hots" :key="index" class="cardBox">
						<view class="cardContent">
							<!-- {{ card.content }} -->
							<view class="contentLeft">
								<view class="LeftTop">
									<image :src="item.images" mode=""></image>

								</view>
								<view class="LeftBotton">

								</view>
							</view>
							<view class="contentRight">
								<view class="RightTop">

									<view class="top2">
										{{item.start_date}} - {{item.end_date}} · {{item.weeks}}
										{{$t('activity.weeks')}}
									</view>
									<view class="top3">
										{{item.title}}
									</view>
								</view>
								<view class="RightBotton">
									<view class="botton1">
										{{item.content}}
									</view>
									<view class="botton2">
										<view class="Dli">
											{{item.bet}}
											<br>
											{{$t('activity.bet')}}
										</view>
										<view class="Dli">
											{{item.total_number}}
											<br>
											{{$t('activity.players')}}
										</view>
										<view class="Dli">
											R${{item.prize_pool.toLocaleString("pt-BR")}}
											<br>
											{{$t('activity.pot')}}
										</view>
									</view>
								</view>
							</view>

							<view class="iconRight">
								<u-icon name="arrow-right" color="#107c10" size="35" bold
									@click="goPage('/pages/activity/detail?id='+item.id)"></u-icon>
							</view>
						</view>
					</view>
					<view class="u-p-30"><u-loadmore :status="status" bgColor="#fff"
							@loadmore="goPage('/pages/activity/lists')" :loadText="loadText"></u-loadmore>
					</view>
				</view>
			</view>
		</view>

		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
			:custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<!-- <fa-tabbar></fa-tabbar> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				status: 'loadmore',
				is_update: false,
				has_more: false,
				current: 0,
				scrollTop: 0,
				color: this.$u.color['mainColor'],
				hots: [],

			};
		},
		onShow() {
			this.activityIndex();
			
		},
		computed: {
			notice() {
				let arr = [];
				if (this.vuex_config.notice) {
					this.vuex_config.notice.map(item => {
						arr.push(item.title);
					});
				}
				return arr;
			},
			loadText() {
				return {
					loadmore: this.$t('common.load.loadmore'),
					loading: this.$t('common.load.loading'),
					nomore: this.$t('common.load.nomore')
				}
			}
		},
		methods: {
			openPage(index) {
				this.goPage(this.vuex_config.swiper[index]['url'])
			},
			change(e) {
				this.current = e.detail.current;
			},
			click(index) {

			},
			activityIndex() {
				this.$api.activityIndex().then(({
					code,
					data,
					msg
				}) => {

					if (code) {
						this.hots = data;
					}
				});
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//下拉刷新
		onPullDownRefresh() {},
		onReachBottom() {}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f6f8;
	}
</style>
<style lang="scss" scoped>
	.indicator-dots {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.indicator-dots-item {
		background-color: $u-tips-color;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}

	.indicator-dots-active {
		background-color: $u-type-primary;
	}

	.notice {
		margin-bottom: 30rpx;
	}

	.index-content {
		margin-top: 30rpx;
		background-color: #ffffff;

		.title {
			position: relative;
			padding: 30rpx 50rpx;
			border-bottom: 1px solid #f4f6f8;

			.stroke {
				&::before {
					content: '';
					width: 8rpx;
					height: 30rpx;
					background-color: #374486;
					position: absolute;
					top: 36%;
					left: 30rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	.cardBox {
		width: 100%;
		height: 170px;
		border-bottom: 1px #d2d0ce solid;
		box-sizing: border-box;

		.cardContent {
			padding: 10px;
			display: flex;

			.contentLeft {
				width: 25%;

				.LeftTop {

					image {
						width: 100%;
						height: 80px;
						border-radius: 8px;
					}
				}

				.LeftBotton {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #ff8c00;
					padding: 0 8px;
				}
			}

			.contentRight {
				width: 65%;
				padding: 0 10px;

				.RightTop {
					width: 100%;

					.top1 {
						color: #ff8c00;
						font-size: 14px;
					}

					.top2 {
						color: #605e5c;
						font-size: 12px;
					}

					.top3 {
						color: #000000;
						font-size: 15px;
						font-weight: bold;
					}
				}

				.RightBotton {
					width: 100%;

					.botton1 {
						font-size: 12px;
					}

					.botton2 {
						font-size: 12px;
						display: flex;
						justify-content: center;
						margin-top: 8px;

						.Dli {
							text-align: center;
							margin-right: auto;
						}
					}
				}

			}

			.iconRight {
				width: 10%;
				height: 156px;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		}
	}

	.hots-list {

		/* margin-top: 30rpx;
	padding: 0 10rpx 30rpx; */
		.item {
			width: 100%;
			background-color: #ffffff;
			box-shadow: 0px 0px 5px rgb(233, 235, 243);
			margin-bottom: 30rpx;
			border-radius: 10rpx;
			overflow: hidden;
			border: 1px solid #e9ebf3;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.images {
				width: 250rpx;
				height: 220rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content {
				flex: 1;

				.name {
					min-height: 110rpx;
				}

				.foot {
					padding: 0 15rpx;
				}

				.market_price {
					text-decoration: line-through;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>